<template>
  <el-form
    :model="registeredForm"
    ref="registeredForm"
    :rules="formRules"
    class="FPForm"
  >
    <el-form-item
      prop="usertype"
      label="用户类型"
      :label-width="formLabelWidth"
      :rules="[
        { required: true, message: '用户类型不能为空', trigger: 'blur' },
      ]"
    >
      <el-select
        v-model="registeredForm.usertype"
        placeholder="请选择用户类型"
        @change="getShi(xzqdm, 1)"
      >
        <el-option label="市（州）级" value="2"></el-option>
        <el-option label="县（区）级" value="3"></el-option>
        <el-option label="乡镇级" value="5"></el-option>
        <el-option label="村级" value="6"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item
      label="省名称"
      :rules="[{ required: true, message: '省名称不能为空', trigger: 'blur' }]"
      :label-width="formLabelWidth"
    >
      <el-input
        v-model="registeredForm.shengName"
        :disabled="true"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item
      prop="shimc"
      label="市名称"
      :rules="[{ required: true, message: '市名称不能为空', trigger: 'blur' }]"
      :label-width="formLabelWidth"
    >
      <el-select
        v-model="registeredForm.shimc"
        clearable
        placeholder="请选择"
        filterable
        @change="getShi(registeredForm.shimc, 2)"
      >
        <el-option
          v-for="item in ShiList"
          :key="item.gCode"
          :label="item.gName"
          :value="item.gCode"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item
      prop="xianmc"
      label="县名称"
      :rules="[
        { required: xianRules, message: '县名称不能为空', trigger: 'blur' },
      ]"
      :label-width="formLabelWidth"
    >
      <el-select
        v-model="registeredForm.xianmc"
        clearable
        :disabled="xianDisa"
        placeholder="请选择"
        filterable
        @change="getShi(registeredForm.xianmc, 3)"
      >
        <el-option
          v-for="item in XianList"
          :key="item.gCode"
          :label="item.gName"
          :value="item.gCode"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item
      prop="xzmc"
      label="乡镇名称"
      :rules="[
        { required: xzRules, message: '乡镇名称不能为空', trigger: 'blur' },
      ]"
      :label-width="formLabelWidth"
    >
      <el-select
        v-model="registeredForm.xzmc"
        clearable
        :disabled="xzDisa"
        placeholder="请选择"
        filterable
        @change="getShi(registeredForm.xzmc, 4)"
      >
        <el-option
          v-for="item in XiangList"
          :key="item.gCode"
          :label="item.gName"
          :value="item.gCode"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item
      prop="cmc"
      label="村名称"
      :rules="[
        { required: cRules, message: '村名称不能为空', trigger: 'blur' },
      ]"
      :label-width="formLabelWidth"
    >
      <el-select
        v-model="registeredForm.cmc"
        clearable
        :disabled="cDisa"
        placeholder="请选择"
        filterable
      >
        <el-option
          v-for="item in CunList"
          :key="item.gCode"
          :label="item.gName"
          :value="item.gCode"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="身份证号" :label-width="formLabelWidth">
      <el-input
        type="number"
        v-model.number="registeredForm.sfz"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item
      prop="username"
      label="用户姓名"
      :label-width="formLabelWidth"
      :rules="[
        { required: true, message: '用户姓名不能为空', trigger: 'blur' },
      ]"
    >
      <el-input v-model="registeredForm.username" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item
      label="用户性别"
      prop="sfbxzcfDHZZL"
      :label-width="formLabelWidth"
    >
      <el-radio-group v-model="registeredForm.xb">
        <el-radio label="1">男</el-radio>
        <el-radio label="2">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item
      prop="zw"
      label="职务"
      :label-width="formLabelWidth"
      :rules="[{ required: true, message: '职务不能为空', trigger: 'blur' }]"
    >
      <el-input v-model="registeredForm.zw" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item
      prop="ssdw"
      label="所属单位"
      :label-width="formLabelWidth"
      :rules="[
        { required: true, message: '所属单位不能为空', trigger: 'blur' },
      ]"
    >
      <el-input v-model="registeredForm.ssdw" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item
      label="角色"
      prop="js"
      :rules="[{ required: true, message: '角色不能为空', trigger: 'blur' }]"
      :label-width="formLabelWidth"
    >
      <el-checkbox-group v-model="registeredForm.js">
        <el-checkbox :disabled="js1" label="1" name="js">管理员</el-checkbox>
        <el-checkbox :disabled="js10" label="10" name="js">审核员</el-checkbox>
        <el-checkbox :disabled="js100" label="100" name="js"
          >复核员</el-checkbox
        >
        <el-checkbox :disabled="js1000" label="1000" name="js"
          >填报员-基础信息</el-checkbox
        >
        <el-checkbox :disabled="js10000" label="10000" name="js"
          >填报员-管理信息</el-checkbox
        >
      </el-checkbox-group>
    </el-form-item>

    <el-form-item
      prop="phone"
      label="用户电话(账户)"
      :label-width="formLabelWidth"
      :rules="[
        { required: true, message: '用户电话(账户)不能为空', trigger: 'blur' },
      ]"
    >
      <el-input
        v-model.number="registeredForm.phone"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item
      prop="password"
      label="用户密码"
      :label-width="formLabelWidth"
      :rules="[
        { required: true, message: '用户密码不能为空', trigger: 'blur' },
      ]"
    >
      <el-input
        type="password"
        v-model="registeredForm.password"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item
      prop="password_confirm"
      label="确认密码"
      :label-width="formLabelWidth"
    >
      <el-input
        type="password"
        v-model="registeredForm.password_confirm"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item
      prop="phoneCode"
      label="验证码"
      :label-width="formLabelWidth"
      :rules="[{ required: true, message: '验证码不能为空', trigger: 'blur' }]"
    >
      <el-input
        class="VerificationCode"
        v-model="registeredForm.phoneCode"
        autocomplete="off"
      ></el-input>
      <!-- <el-button :loading="register" type="success" class="register">{{
            send
          }}</el-button> -->

      <el-button
        :loading="register"
        type="success"
        class="register"
        v-show="verShow"
        @click="handleClick()"
        >点击获取验证码</el-button
      >
      <el-button
        :loading="register"
        type="success"
        class="register"
        v-show="!verShow"
        ><span>{{ timer }}</span
        >秒后重新获取</el-button
      >
    </el-form-item>

    <el-form-item class="dialog-footer">
      <el-button
        style="margin: 0 auto"
        type="primary"
        @click="onSubmit"
        v-loading.fullscreen.lock="fullscreenLoading"
        >确 定</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
// import { getAll } from '@/api/mapProxy'
import md5 from 'js-md5'
let Base64 = require('js-base64').Base64
import { register, gbQuerydataXY } from '@/api/register'
export default {
  props: {
    title: {
      type: String,
      default: 'hello world',
    },
  },
  data() {
    const passwordConfirmLvalidate = (rule, value, callback) => {
      if (this.registeredForm.password === '') {
        callback(new Error('请先输入用户密码'))
      } else if (value !== this.registeredForm.password) {
        callback(new Error('请保持密码与确认密码一致'))
      } else {
        callback()
      }
    }
    return {
      options: [
        {
          shimc: '130626',
          label: '石家庄市',
        },
        {
          shimc: '130123',
          label: '唐山市',
        },
        {
          shimc: '130234',
          label: '邯郸市',
        },
        {
          shimc: '130345',
          label: '唐山市',
        },
        {
          shimc: '130456',
          label: '邢台市',
        },
      ],
      ShiList: [],
      XianList: [],
      XiangList: [],
      CunList: [],
      xzqdm: '130000',
      fullscreenLoading: false,
      registeredata: {},
      registeredForm: {
        usertype: '',
        shengName: '河北省',
        shimc: '',
        xianmc: '',
        xzmc: '',
        cmc: '',
        sfz: '',
        username: '',
        xb: '',
        zw: '',
        ssdw: '',
        js: [],
        phone: this.title,
        password: '',
        password_confirm: '',
        phoneCode: '',

        note: '123',
        nickName: '321',
        icon: '098',
        email: '2222@qq.com',
      },
      formRules: {
        password_confirm: [
          {
            required: true,
            message: '确认密码不能为空',
            trigger: 'blur',
          },
          {
            required: true,
            trigger: 'blur',
            validator: passwordConfirmLvalidate,
          },
        ],
      },
      register: false,
      send: '发送(60s)',
      verShow: true,
      timer: 60,
      xianRules: false,
      xianDisa: true,
      xzRules: false,
      xzDisa: true,
      cRules: false,
      cDisa: true,
      formLabelWidth: '120px',
      js1: true,
      js10: true,
      js100: true,
      js1000: true,
      js10000: true,
    }
  },
  watch: {
    'registeredForm.usertype': function (value, oldval) {
      this.registeredForm.js = []
      this.ShiList = []
      this.XianList = []
      this.XiangList = []
      this.CunList = []

      this.registeredForm.shimc = ''
      this.registeredForm.xianmc = ''
      this.registeredForm.xzmc = ''
      this.registeredForm.cmc = ''
      if (value === '2') {
        this.xianRules = false
        this.xianDisa = true
        this.xzRules = false
        this.xzDisa = true
        this.cRules = false
        this.cDisa = true
        this.js1 = false
        this.js10 = false
        this.js100 = false
        this.js1000 = true
        this.js10000 = true
      } else if (value === '3') {
        this.xianRules = true
        this.xianDisa = false
        this.xzRules = false
        this.xzDisa = true
        this.cRules = false
        this.cDisa = true
        this.js1 = false
        this.js10 = false
        this.js100 = false
        this.js1000 = false
        this.js10000 = false
      } else if (value === '5') {
        this.xianRules = true
        this.xianDisa = false
        this.xzRules = true
        this.xzDisa = false
        this.cRules = false
        this.cDisa = true
        this.js1 = false
        this.js10 = false
        this.js100 = false
        this.js1000 = false
        this.js10000 = false
      } else if (value === '6') {
        this.xianRules = true
        this.xianDisa = false
        this.xzRules = true
        this.xzDisa = false
        this.cRules = true
        this.cDisa = false
        this.js1 = true
        this.js10 = true
        this.js100 = true
        this.js1000 = false
        this.js10000 = false
      } else {
      }
    },
  },
  created: {},
  methods: {
    getShi(xzqdm, num) {
      gbQuerydataXY({ gCode: xzqdm })
        .then((res) => {
          // console.log(res)
          if (res.code === 200) {
            if (num === 1) {
              this.ShiList = res.data
            } else if (num === 2) {
              this.XianList = res.data
            } else if (num === 3) {
              this.XiangList = res.data
            } else if (num === 4) {
              this.CunList = res.data
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleClick() {
      if (!this.registeredForm.phone) {
        this.$message({ message: '请输入用户电话', type: 'warning' })
        return
      }
      this.verShow = false
      var auth_timer = setInterval(() => {
        this.timer--
        if (this.timer <= 0) {
          this.verShow = true
          clearInterval(auth_timer)
        }
      }, 1000)

      // getAll({ phone: this.registeredForm.phone, sendType: 'reg' })
      //   .then((res) => {
      //     console.log(res)
      //   })
      //   .catch((err) => {
      //     console.log(err)
      //   })

      // this.$axios({
      //   method: 'post',
      //   url: 'nodeMiddle/common/sendMsg',
      //   data: {
      //     phone: this.registeredForm.phone,
      //     sendType: 'reg',
      //   },
      // })
      //   .then((res) => {
      //     console.log(res)
      //   })
      //   .catch((err) => {
      //     console.dir(err)
      //     this.$toast.fail('系统错误')
      //   })
    },
    onSubmit() {
      this.registeredForm.password = Base64.encode(this.registeredForm.password)
      this.registeredForm.password_confirm = Base64.encode(
        this.registeredForm.password_confirm
      )
      this.registeredata = this.registeredForm
      this.$refs.registeredForm.validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true
          // console.log(this.registeredForm)
          register(this.registeredata)
            .then((res) => {
              if (res.code === 200) {
                this.$emit('close', '注册成功')
                this.$message({
                  type: 'success',
                  message: '注册成功，请联系上级通过',
                })
                this.fullscreenLoading = false
              }
            })
            .catch((err) => {
              console.log(err)
            })
          // this.$axios({
          //   method: 'post',
          //   url: '/api/admin/register',
          //   data: this.registeredForm,
          // })
          //   .then((res) => {
          //     console.log(res)
          //   })
          //   .catch((err) => {
          //     console.dir(err)
          //     this.$toast.fail('系统错误')
          //   })
        } else {
          this.$message({
            message: '请正确填写表单',
            type: 'warning',
          })
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
$bg: #fff;
$light_gray: #fff;
$cursor: #fff;
.FPForm {
  .el-select {
    width: 100%;
  }

  /* reset element-ui css */
  .login-container {
    .el-input {
      display: inline-block;
      height: 42px;
      width: 85%;

      input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 42px;
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }

    .el-form-item {
      // border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(35, 114, 171, 1);
      border-radius: 5px;
      color: #454545;
    }
  }
}
</style>